<template>
	<view>
		<div style="height:50rpx;background:#fff"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			<view class="titleBoxSty">
				<p v-for="(item, index) in titleList" class="common" :class="{ active: index == current }"
					@click="changeType(index)">{{ item }}</p>
				<p class="common" @click="current = 3" :class="{ active: current == 3 }">
					{{$t('我邀请的')}}
				</p>
			</view>
		</div>
		<div class="evenly checkSty" v-if="current != 3">
			<view v-for="(item, index) in checkList" class="commonCheck" :class="{ activeCheck: index == currentCheck }"
				@click="changeCheck(index)">
				{{ item }}
			</view>
		</div>
		<div v-if="current != 3">
			<view v-if="infoList.length != 0" v-for="(item, index) in infoList" class="between listBox "
				@click="goDetail(item.id)">
				<view class="flex-start " v-if="item.request_user && item.request_user.car">
					<view class="carBox">
						<view class="carCard">
							{{ item.request_user.car.car_number }}
						</view>
					</view>
					<p class="driverSty">{{ item.request_user.username }} </p>
				</view>
				<p class="driverSty" style="font-size: 24rpx;font-weight: 500;padding-left: 20rpx;"> {{ item.create_at }}</p>

				<image src="../../static/icon/arrow.png" mode="" class="w-10 h-15 mr-34"></image>
			</view>

			<div class="center pt-50">
				<u-empty :text="$t('暂无数据')" v-if="infoList.length == 0" textSize="30rpx" iconSize="100rpx"></u-empty>
			</div>
		</div>

		<!-- status 1待回复 2 通过 3拒绝 -->

		<view v-for="(item, index) in inviteList" class="between listBox" v-if="current == 3">
			<div class="between w-full">
				<view class="">
					<p class="pl-20 font-bold mb-10">{{ get(item, "request_user.username") }} </p>
					<view class="carBox">
						<view class="carCard center">
							{{ get(item, "request_user.car.car_number", "Car Info Error") }}
						</view>
					</view>
				</view>
				<div class="mr-20">
					<div style="text-align: right;" class="mb-10 fz26 font-bold">
						<text v-if="item.status == 1" style="color: #278AFF;">{{$t('待回复')}}</text>
						<text v-if="item.status == 2" style="color: green;">{{$t('已通过')}}</text>
						<text v-if="item.status == 3" style="color: red;">{{$t('拒绝')}}</text>
					</div>
					<p class="text-gray-500 fz22"> {{ item.create_at }}</p>
				</div>
			</div>
		</view>

	</view>
</template>

<script>
import { invite_bind } from '@/api/driver'
import { getInviteList } from '@/api/publish'
export default {
	components: {
		invite_bind
	},
	data() {
		return {
			current: 0,
			currentCheck: 0,
			titleList: [this.$t('解绑'), this.$t('邀请')],
			checkList: [this.$t('已处理'), this.$t('待处理')],
			infoList: [],
			inviteList: []
		}
	},
	onLoad() {
		this.list()
		this.getInviteList()
	},
	methods: {
		getInviteList() {
			getInviteList({
				user_id: uni.getStorageSync('user_id'),
			}).then((res) => {
				this.inviteList = res.data.data.data
			})
		},
		back() {
			this.cback()
		},
		changeType(index) {
			this.current = index
			this.list()

		},
		changeCheck(index) {
			this.currentCheck = index
			this.list()
		},
		goDetail(id) {
			uni.navigateTo({
				url: '/pages/driverTask/ApplyUnbinding/ApplyUnbinding?id=' + id + "&type=" + this.current
			})
		},
		list() {
			var that = this
			that.infoList = []
			invite_bind({
				register_id: uni.getStorageSync('user_id'),
				current: that.current,	// 0解绑 1邀请
				currentCheck: that.currentCheck 	// 0已处理 1待处理
			}).then((res) => {
				that.infoList = res.data.data.data;
			})
		},
	}
}
</script>

<style lang="less">
page {
	background-color: #F6F7FB;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	background: #fff;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 15rpx;
}

.titleBoxSty {
	display: flex;
	justify-content: center;
	margin-left: -70rpx;

	.common {
		font-size: 34rpx;
		color: #8c8c8c;
		margin-left: 70rpx;
	}

	.active {
		font-size: 40rpx;
		color: #1d1d1d;
	}
}

.checkSty {
	background: #fff;
	padding-bottom: 20rpx;

	.commonCheck {
		// width: 50%;
		height: 70rpx;
		font-size: 28rpx;
		color: #8c8c8c;
		line-height: 70rpx;
	}

	.activeCheck {
		color: #278AFF;
		border-bottom: 4rpx solid #278AFF;
	}
}

.listBox {
	margin-left: 24rpx;
	margin-right: 24rpx;
	background: #fff;
	margin-top: 16rpx;
	border-radius: 26rpx;
	padding: 20rpx 0;

	.carBox {
		// width: 194rpx;
		height: 44rpx;
		border-radius: 6rpx;
		background: #FCCE00;
		margin: auto 20rpx;

		.carCard {
			height: 38rpx;
			flex-shrink: 0;
			border-radius: 6rpx;
			border: 0.5rpx solid rgba(29, 29, 29, 0.47);
			border-radius: 6rpx;
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			letter-spacing: 1rpx;
			margin: 5rpx;
			padding: 10rpx;
		}
	}

	.driverSty {
		line-height: 96rpx;
		font-size: 32rpx;
		color: #1D1D1D;
		font-weight: 600;
	}
}
</style>
